<template>
	<div class="content">
		<heads :current='2'></heads>
		<div class="banner">
			<a href="#">
				<img :src="about" />
				<div class="font">
					<p>{{ $t('about.title') }}</p>
				</div>
			</a>
		</div>
		<div class="main_page_box">
			<div class="m">
				<div class="main_items">
					<div class="tong_title">
						<span>{{ $t('about.team.title') }}</span>
					</div>
					<ul>
						<li>
							<a href="#">
								<div class="picture"><img :src="team" /></div>
								<div class="grow">
									<p class="on">{{ $t('about.team.description1') }}</p>
									<span>{{ $t('about.team.description2') }}</span>
									<div class="btn" @click="toContact">{{ $t('about.team.contactUs') }}</div>
								</div>
							</a>
						</li>
					</ul>
				</div>
				<div class="main_items">
					<div class="tong_title">
						<span>{{ $t('about.boat.title') }}</span>
					</div>
					<ul class="on">
						<li>
							<a href="#">
								<div class="picture">
									<div class="swiper mySwiper">
										<div class="swiper-wrapper">
                      <div class="swiper-slide" v-for="item in boatLeftList" :key="item">
                        <el-image :preview-src-list="boatLeftList" :src="item" style="width: 100%"/>
                      </div>
										</div>
										<div class="swiper-pagination"></div>
									</div>
								</div>
								<div class="grow">
									<p>{{ $t('about.boat.description1') }}</p>
									<span>{{ $t('about.boat.description2') }}</span>
									<span>{{ $t('about.boat.description3') }}</span>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="picture">
									<div class="swiper mySwiper1">
										<div class="swiper-wrapper">
                      <div class="swiper-slide" v-for="item in boatRightList" :key="item">
                        <el-image :preview-src-list="boatRightList" :src="item" style="width: 100%"/>
                      </div>
										</div>
										<div class="swiper-pagination"></div>
									</div>
								</div>
								<div class="grow">
									<div class="btn" style="margin-top: .3rem;" @click="$router.push({ path: '/gallery' })">
                    {{ $t('home_page.gallery.morePhotos') }}
                  </div>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<foot></foot>
	</div>
</template>

<script>
	import swiper from "swiper";
	export default {
		name: '',
		data() {
			return {
				mySwiper: null,
				mySwiper1: null
			}
		},
    computed: {
      banner() {
        return this.$store.state.banners || {}
      },
      // 产品头部-3-Hour Sunset Fishing Cruise
      about() {
        return (this.banner['about'] || { url: '' }).url
      },
      team() {
        return (this.banner['team'] || { url: '' }).url
      },
      // 产品轮播-3-Hour Sunset Fishing Cruise
      boatLeftList() {
        return (this.banner['boat-left'] || {url: '' }).url.split(',')
      },
      // 产品其他-3-Hour Sunset Fishing Cruise
      boatRightList() {
        return (this.banner['boat-right'] || {url: '' }).url.split(',')
      }
    },
		mounted() {
      setTimeout(() => {
        this.initSwiper();
      },1000)
		},
		methods: {
			initSwiper() {
				this.mySwiper = new Swiper(".mySwiper", {
          //设置轮播的循环方式
          loop: false,
          //设置自动播放间隔时间
          autoplay: 0,
          // 轮播效果,默认为平滑轮播
          effect: "slide",
          pagination: ".swiper-pagination",
          autoplayDisableOnInteraction: true,
				});
				this.mySwiper1 = new Swiper(".mySwiper1", {
          //设置轮播的循环方式
          loop: false,
          //设置自动播放间隔时间
          autoplay: 0,
          // 轮播效果,默认为平滑轮播
          effect: "slide",
          pagination: ".swiper-pagination",
          autoplayDisableOnInteraction: true,
				});
			},
      toContact() {
        this.$router.push('/contact')
      }
		}
	}
</script>

<style>

</style>
